<template>
  <div class="openlayermap">
    <div
      :id="olmapId"
      ref="map"
      style="width: 100%; height: 600px; border: 1px solid red"
    />
    <!-- <div :id="olmapId"></div> -->
  </div>
</template>

<script>
import 'ol/ol.css'
import olMap from 'ol/Map'
import olView from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import ImageLayer from 'ol/layer/Image'

import Projection from 'ol/proj/Projection'

import { defaults as defaultControls } from 'ol/control'
import { closestOnCircle, createStringXY } from 'ol/coordinate'
import MousePosition from 'ol/control/MousePosition'
import { getCenter } from 'ol/extent'
import {
  Draw,
  Modify,
  Snap,
  Select,
  Translate,
  Interaction,
  defaults as defaultInteractions,
  DragRotateAndZoom
} from 'ol/interaction.js'
import { altKeyOnly, click, pointerMove } from 'ol/events/condition'
import { Style, Icon, Text, Fill, Stroke, Circle } from 'ol/style'
import Overlay from 'ol/Overlay'
import { Vector as VectorLayer, Image } from 'ol/layer.js'
import { OSM, Vector, ImageStatic } from 'ol/source'
import { GeoJSON } from 'ol/format.js'
import Feature from 'ol/Feature'
import { Circle as CircleFeature } from 'ol/geom'
import { baseUrl } from '@/utils/global'
import Cookie from 'js-cookie'

import {
  getLayerFenceDataList,
  getSingeFence,
  loadType,
  getAllFence,
  getAllCameraFence,
  getCameraList,
  getCameraLayerList,
  cameraOne
} from '@/api/system/historyDisplayInfo.js'
import $ from 'jquery'
export default {
  props: {
    currentmap: {
      type: Object,
      default: () => {}
    },
    // 地图map唯一id值
    olmapId: {
      type: String,
      require: true,
      default: function() {
        return (
          // "map-self-" + new Date().getTime()
          'map-self'
        )
      }
    }
  },
  data() {
    return {
      curMap: null,
      mapUrl: null
    }
  },
  watch: {
    currentmap(value, oldvalue) {
      // console.log('监听变化', value, oldvalue)
      if (JSON.stringify(value) !== '{}') {
        this.nodeClick()
      }
    }
  },

  methods: {
    nodeClick() {
      const self = this

      if (self.currentmap != undefined) {
        console.log(self.$refs.map)
        $('#' + this.olmapId).empty()
        self.mapUrl = baseUrl + '/file' + self.currentmap.mapPath

        // self.mapName = self.currentmap.mapName

        // Load_Map(
        //   baseUrl + '/file' + self.currentmap.mapPath,
        //   self.currentmap.mapActualX,
        //   self.currentmap.mapActualY,
        //   self.currentmap.mapPixelX,
        //   self.currentmap.mapPixelY,
        //   self.currentmap.mapPixelX / self.currentmap.mapActualX,
        //   [self.currentmap.mapOriginX, self.currentmap.mapOriginY],
        //   false
        // )
        // Load_Fence(self.mapId)
        // Load_Fence2()
      }
    },
    initMap() {
      // 定义坐标系
      var projection = new Projection({
        // code: "EPSG:900931", // 用“米”做单位的x/y坐标的投影
        code: 'xkcd-image',
        units: 'pixels', // 单位：像素
        extent: [0, 0, 1200, 600] // 图片图层四至,分别是静态图片左下角和右上角的基于基站的坐标
      })

      this.map = new olMap({
        target: this.mapId,
        controls: defaultControls({
          zoom: true
        }).extend([]),
        layers: [
          new Image({
            source: new ImageStatic({
              url: this.mapUrl,
              // "https://scpic.chinaz.net/files/pic/pic9/202102/hpic3599.jpg",
              // imageSize: [1300, 980], // 图片尺寸（px）  [长,宽]
              projection: projection,
              imageExtent: [-500, -100, 1200, 600] // // 映射到地图的范围
            })
          })
          // vector,
        ],
        view: new olView({
          center: [0, 0], // 设置地图中心支
          projection: projection,
          zoom: this.zoom // 默认的地图大小设置
        })
      })
    }
  }
}
</script>

<style>
</style>
